<template>
    <div class="container sm-mineWrap">

        <div class="row wrapper" ref="wrapper7">
            <div class="content">
                <!-- 个人信息 -->
                <div class="row sm-mine">
                    <div class="contain">
                        <img src="../../static/image/Mine/mine.jpg" alt="">
                        <div>
                            <p class="sm-uname">reply9527</p>
                            <p class="sm-addr">
                                <span>我的收货地址</span><i class="iconfont">&#xe62f;</i>
                            </p>
                        </div>

                    </div>

                </div>
                <!-- 其他版块 -->
                <div class="row sm-group" v-for="(value,index) of selector" :key="'selector'+index">
                    <div class="contain" v-for="(v,i) of value" :key="'value'+i" @click="routerTo(v.query)">
                        <img :src="v.imageSrc" alt="">
                        <div>

                            <span class="sm-msg">{{v.msg}}</span>
                            
                            <div>
                                <span v-if="v.info">{{v.info}}</span>
                                <i class="iconfont">&#xe62f;</i>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="sm-exit">
                    退出登录
                </div>
            </div>
        </div>

       <BottomNavBar />
    </div>
</template>
<script>
import Bscroll from "better-scroll"

export default {
    mounted() {
        this.bscrollInit();
    },
    methods: {
        bscrollInit() {
            this.$nextTick(() => {
                if (!this.scroll) {
                    this.scroll = new Bscroll(this.$refs.wrapper7, {
                        click: true
                    });
                } else {
                    this.scroll.refresh();
                }
            });
        },
        routerTo(path){
            if(path){
                
                this.$router.push(path)
            }
        }
    },
    data(){
        return {
            selector:[
                [
                    {
                        imageSrc:"./static/image/Mine/1-1.png",
                        msg:"我的拼单"
                    }
                ],
                [
                    {
                        imageSrc:"./static/image/Mine/2-1.png",
                        msg:"我的购物车",
                        query:{
                            path:"/simple/ShoppingCart"
                        }
                    },
                    {
                        imageSrc:"./static/image/Mine/2-2.png",
                        msg:"我的拼团"
                    },
                    {
                        imageSrc:"./static/image/Mine/2-3.png",
                        msg:"我的钱包",
                        info:"快速提现"
                    },
                    {
                        imageSrc:"./static/image/Mine/2-4.png",
                        msg:"我的优惠券"
                    },
                    {
                        imageSrc:"./static/image/Mine/2-5.png",
                        msg:"我收藏的商品"
                    },
                    {
                        imageSrc:"./static/image/Mine/2-6.png",
                        msg:"我收藏的店铺"
                    },
                ],
                [
                    {
                        imageSrc:"./static/image/Mine/3-1.png",
                        msg:"消息通知"
                    },
                    {
                        imageSrc:"./static/image/Mine/3-2.png",
                        msg:"客服"
                    },
                    {
                        imageSrc:"./static/image/Mine/3-3.png",
                        msg:"意见反馈"
                    },
                ],
            ]
        }
    }
  
}
</script>
<style lang="less">
    .sm-mineWrap{
        .wrapper{
            position: absolute;
            top:0;
            left:0;
            bottom:0.8rem;
            background-color: #eee;
            >.content{
                .sm-mine{
                    background-color: #fff;
                    >.contain{
                        height:1.7rem;
                        display: flex;
                        align-items: center;
                        img{
                            width:0.85rem;
                            border-radius: 50%;
                        }
                        >div{
                            margin-left: 0.2rem;
                            height:0.85rem;
                            width:50%;
                            p{
                                margin:0 0 0.1rem;
                            }
                            .sm-uname{
                                font-size: 0.3rem;
                            }
                            .sm-addr{
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                                color:#666;
                                i{
                                    display: inline-block;
                                    transform: rotate(180deg);
                                    color:#ccc;
                                }
                            }   
                        }
                    }
                }
                .sm-group{
                    margin-top:0.3rem;
                    background-color: #fff;
                    >.contain{
                        @height:0.85rem;
                        height:@height;
                        display: flex;
                        justify-content: space-between;
                        align-items: center;
                        >img{
                            width:0.5rem;
                        }
                        >div{
                            height: @height;
                            width:89%;
                            display: flex;
                            justify-content: space-between;
                            align-items: center;
                            border-top:1px solid #eee;
                            &:first-child{
                                border-top:none;
                            }
                            .sm-msg{
                                font-size: 0.27rem;
                            }
                            >div{
                                height: @height;
                                line-height: @height;
                                span{
                                    color:#888;
                                    display: inline-block;
                                }
                                i{
                                    display: inline-block;
                                    transform: rotate(180deg);
                                    color:#ccc;
                                }
                            }

                        }
                    }
                }
                .sm-exit{
                    width:80%;
                    text-align: center;
                    padding:0.1rem 0;
                    margin:0.3rem auto 0.8rem;
                    border-radius: 0.05rem;
                    font-size: 0.3rem;
                    color:#eee;
                    background-color: #ff5777;
                }
            }
        }
    }

</style>